<template>
  <header class="headers">
    <ul class="kind-header">
    	<div class="wrapper-li">
    		 <router-link tag="li"  :to="item.path" v-for = " (item, index) of list " :key = "index"><!--此行代码用于跳转路由类似于（a标签）-->
        <span></span>
        <p>{{item.name}}</p>
      </router-link>
    	</div>
    </ul>
  </header>
</template>
<script>
export default {
  data () {
    return {
      list: [{
        name: '旅游攻略',
        icon: '',
        path: '/discover/travelstrategy'
      }, {
        name: '出行专题',
        icon: '',
        path: '/discover/triptopic'
      }, {
        name: '房东故事',
        icon: '',
        path: '/discover/landloardstory'
      }, {
        name: '热门评论',
        icon: '',
        path: '/discover/hotcomments'
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.headers {
	  @include rect(100%, 0.44rem);
  ul {
    @include rect(100%, 100%);
    @include flexbox();
    @include flex-direction(column);
    @include justify-content(flex-end);
      @include align-items();
    border-bottom:1px solid #aaa;
     .wrapper-li{
      	@include rect(95%, 70%);
        @include flexbox();
      li {
      @include flex();
      @include rect(15%, 100%);
      @include flexbox();
      @include justify-content();
      @include align-items();
      &.router-link-exact-active.router-link-active {
        color:#fff;
        background:#CCCCCC;
        border:1px solid #cecece;
        border-radius: 5px;
      }
    }
      }
   
  }
}
</style>
